<template>
	<view style="width: 100%;">
		<view v-if="accesstoken" style="background-color: #FFFFFF;margin-top: 20upx;">
			<uni-swipe-action :options="options" v-for="(item,index) in carts" :key='index' @click='handleDel(item)'>
				<view class="order">
					<uni-icon type="checkbox-filled" size="44" :class="item.checked?'ischeck':'none'" @click='switchSelect(item,index)'></uni-icon>
					<image class="order-img" :src="item.url"></image>
					<view class="item-title">
						<p class="name">{{item.name}}</p>
						<p style='font-size: 24upx;line-height: 60upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;'>{{item.spes_desc}}</p>
						<view class="uni-card">
							<text class="uni-text">¥{{item.price}}</text>
							<uni-number-box v-model='item.num' @change='handleChange($event,item)'></uni-number-box>
						</view>
					</view>
				</view>
			</uni-swipe-action>
		</view>
		<view v-else style="color: #666;text-align: center;margin-top: 100upx;">
			<p>登陆后可查看购物车信息</p>
		</view>
		<view class="bottom_total">
			<view style="display: flex;padding-left: 20upx;" @click="allSelect">
				<uni-icon type="checkbox-filled" size="40" :class="isCheckedAll?'ischeck':'none'"></uni-icon>
				<text class="small_text">全选</text>
			</view>
			<view style="display: flex;">
				<text>合计:￥ </text>
				<text class="price">{{totalMoney}}</text>
				<button class="button-red" @click="confirmOrder" formType="submit">去结算</button>
			</view>
		</view>
	</view>
</template>

<script>
	var _self, page = 1,timer = null;
	import {
		get,
		post,
		showToast
	} from '../../js/common';
	export default {
		data() {
			return {
				isAllSelect: false,
				totalMoney: 0,
				userId: uni.getStorageSync('userId'),
				accesstoken: uni.getStorageSync('token'),
				// 商品详情介绍
				carts: {},
				isCheckedAll: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#D7000F'
					}
				}],
				loadingText: '加载中...'
			}
		},
		onShow() {
			_self = this;
			this.getCart()
		},
		onPullDownRefresh() {
			this.getCart()
		},
		onReachBottom: function() {
			if (timer != null) {
				clearTimeout(timer);
			}
			timer = setTimeout(function() {
				_self.getmorenews();
			}, 1000);
		},
		methods: {
			getCart() {
				try {
					page = 1
					uni.showNavigationBarLoading();
					this.userId = uni.getStorageSync('userId'),
						this.accesstoken = uni.getStorageSync('token')
					let params = {
						userId: this.userId
					}
					post('mobileapi/cart/getCartInfoByUserId', params, this.accesstoken).then(res => {
						if (res.code === 0) {
							this.carts = res.cartInfo.list
							for (let i = 0; i < this.carts.length; i++) {
								if (this.carts[i].checked === false) {
									this.isCheckedAll = false
									break
								} else {
									this.isCheckedAll = true
								}
							}
							this.handlerTotalPrice()
							page++;
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh();
							_self.loadingText = '加载更多';
						}
					})
				} catch (e) {
					// error
				}
			},
			// 改变商品选中状态
			switchSelect(item, index) {
				item.checked = !item.checked
				let data = {
					id: item.id,
					isChecked: item.checked
				}
				post('mobileapi/cart/setCartItemChecked', data)
					.then(res => {
						for (let i = 0; i < this.carts.length; i++) {
							if (this.carts[i].checked === false) {
								this.isCheckedAll = false
								break
							} else {
								this.isCheckedAll = true
							}
						}
						this.handlerTotalPrice()
					})

			},
			// 设置、取消全选
			allSelect() {
				this.isCheckedAll = !this.isCheckedAll
				if (this.isCheckedAll) {
					this.carts.forEach(row => {
						row.checked = true
					});
				} else {
					this.carts.forEach(row => {
						row.checked = false
					});
				}

				//设置是否全选
				let ids = []
				for (let i = 0; i < this.carts.length; i++) {
					ids.push(this.carts[i].id)
				}

				let data = {
					isCheckedAll: this.isCheckedAll,
					cartIds: ids
				}
				post('mobileapi/cart/setCartIsCheckedAll', data).then(res => {
					this.handlerTotalPrice()
				})
			},
			// 确认订单
			confirmOrder() {
				if(this.accesstoken){
					// 正常状态下结算
				let cartIds = []
				for (let i = 0; i < this.carts.length; i++) {
					if (this.carts[i].checked) {
						cartIds.push(this.carts[i].id)
					}
				}
				uni.navigateTo({
					url: '/pages/confirmOrder/index?cartId=' + cartIds + '&total=' + this.totalMoney
				})
				}else{
					uni.showToast({
						title:'请先登录'
					})
				}
				
			},
			// 计算总价格
			handlerTotalPrice() {
				this.totalMoney = 0
				for (let i = 0; i < this.carts.length; i++) {
					if (this.carts[i].checked) {
						this.totalMoney += this.carts[i].price * this.carts[i].num
					}
				}
			},
			// 改变商品数量
			handleChange(val, item) {
				item.num = val
				let params = {
					id: item.id,
					productId: item.productid,
					number: val
				}
				post('mobileapi/cart/updateCartInfo', params).then(res => {
					this.handlerTotalPrice()
				})
			},
			// 删除订单
			handleDel(cart) {
				let ids = []
				ids.push(cart.id)
				let params = {
					id: ids
				}
				post('mobileapi/cart/deleteCartInfoById', params).then(res => {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					})
					this.getCart()
				})
			},
			getmorenews: function() {
				if (_self.loadingText != '' && _self.loadingText != '加载更多') {
					return false;
				}
				_self.loadingText = '加载中...';
				uni.showNavigationBarLoading();
				let params = {
					userId: this.userId
				}
				post('mobileapi/cart/getCartInfoByUserId', params, this.accesstoken).then(res => {
					_self.loadingText = '';
					if (res.page == null) {
						uni.hideNavigationBarLoading();
						_self.loadingText = '已加载全部';
						uni.showToast({
							title: '已加载全部'
						})
						return false;
					}
					page++;
					for (let i = 0; i < res.cartInfo.list.length; i++) {
						_self.carts.push(res.cartInfo.list[i])
					}
					_self.loadingText = '加载更多';
					uni.hideNavigationBarLoading();
				})
			},
		}
	}
</script>

<style>
	.order {
		margin-top: 2px;
		display: flex;
		border-bottom: #EBEBEB 1px solid;
		padding: 20upx 30upx;
	}

	.order-img {
		width: 180upx;
		height: 180upx;
		margin-left: 10upx;
	}

	.item-title {
		margin-left: 20upx;
		flex: 1;
		font-size: 30upx;
	}

	.uni-card {
		display: flex;
		justify-content: space-between;
	}

	.name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.price {
		color: #D7000F;
		font-size: 40upx;
		margin-right: 40upx;
	}

	.small_text {
		font-size: 30upx;
		margin-left: 10upx;
	}

	.bottom_total {
		position: fixed;
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		bottom: 90upx;
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		background: #FFFFFF;
		z-index: 100;
		font-size: 30upx;
	}

	.button-red {
		background-color: #D7000F;
		height: 100upx;
		line-height: 100upx;
		color: #FFFFFF;
		width: 200upx;
		font-size: 30upx;
	}

	.none {
		color: #999;
		display: flex;
		align-items: Center;
	}

	.ischeck {
		color: #13ce66;
		display: flex;
		align-items: Center;
	}

	.uni-text {
		color: #D7000F;
	}
</style>
